* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
@import "header";
@import "footer";
.content{
    width: 1000px;
    margin: 0 auto;
}
.widget-taginput {
    position: relative;
    margin-bottom: 6px;
    .tag-item {
        display: inline-block;
        line-height: 18px;
        font-size: 13px;
        &::before {
            content: "#";
        }
    }
    .tags-count {
        position: absolute;
        right: 0;
        top: 0;
    }
    .tags-wrap {
        display: block;
        width: 100%;
        margin: 12px 0 28px;
        font-size: 0;
        outline: 0;
        cursor: text;
        .tag-item {
            padding: 1px 8px;
            border: 1px solid #222;
            margin: 0 8px 8px 0;
            vertical-align: top;
            &:hover {
                text-decoration: line-through;
            }
            &.event-tag {
                border-color: #c99a05;
                color: #c99a05;
            }
            &.undeletable {
                &:hover {
                    text-decoration: none;
                }
            }
        }
        input {
            width: 100px;
            height: 22px;
            border: 0;
            outline: 0;
            font-size: 13px;
        }
    }
}

.widget-taginput .tags-recommend,
.widget-taginput .tags-mine {
    margin: 6px 0 22px -20px;
    font-size: 0;
}

.widget-taginput .tags-recommend .tag-item,
.widget-taginput .tags-mine .tag-item {
    margin-top: 10px;
    margin-left: 20px;
}

.widget-taginput .tags-recommend .tag-item:hover,
.widget-taginput .tags-mine .tag-item:hover {
    text-decoration: underline;
}

.aside-zone {
    width: 340px;
    height: 85%;
    padding: 18px 20px 140px;
    margin-left: auto;
    font-size: 13px;
    line-height: 18px;
    color: #222;
    background-color: #fff;
    label {
        font-weight: 500;
        em {
            color: #85888a;
        }
    }
    a {
        color: #c99a05;
    }
    .tag-input {
        width: 100px;
        height: 22px;
        border: 0;
        outline: 0;
        font-size: 13px;
    }
    .m-input {
        width: 100%;
        padding: 10px;
        border: 2px solid #e0e0e0;
        margin: 12px 0 28px;
        outline: 0;
        font-size: 13px;
         ::-webkit-input-placeholder {
            color: #85888a;
        }
         :-moz-placeholder {
            color: #85888a;
        }
         ::-moz-placeholder {
            color: #85888a;
        }
         :-ms-input-placeholder {
            color: #85888a;
        }
         ::placeholder {
            color: #85888a;
        }
    }
    .m-input[name=title] {
        height: 40px;
    }
    .m-input[name=content] {
        height: 100px;
        resize: vertical;
    }
    .is-select {
        margin: 12px 0 20px;
        font-size: 12px;
        .placeholder {
            border: 2px solid #e0e0e0;
        }
    }
    .post-album {
        font-size: 0;
        .albums-select {
            width: 190px;
            margin-right: 10px;
            font-size: 12px;
        }
        .new-album {
            display: inline-block;
            width: 100px;
            height: 44px;
            border: 2px solid #e0e0e0;
            margin: 12px 0 20px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
        }
    }
    .third-party {
        position: relative;
        margin: 3px 0 28px;
        font-size: 14px;
        line-height: 20px;
        .is-checkbox {
            position: absolute;
            right: 0;
            top: 8px;
            &::before {
                width: 20px;
                height: 20px;
                border: 2px solid #e0e0e0;
            }
            &::after {
                left: 6px;
                width: 12px;
                height: 12px;
            }
            &.is-checked {
                &::after {
                    background-color: #222;
                }
            }
        }
        .hint-msg {
            display: inline-block;
            width: 100%;
            margin-top: 8px;
            font-size: 12px;
            color: #85888a;
            a {
                margin-left: 5px;
                color: #85888a;
                text-decoration: underline;
            }
        }
    }
    .publish-btn {
        position: absolute;
        bottom: 30px;
        right: 0;
        z-index: 1;
        width: 340px;
        height: 48px;
        padding: 13px 0;
        border: 0;
        text-align: center;
        outline: 0;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 10px;
        text-indent: 10px;
        background-color: #c99a05;
        cursor: pointer;
    }
    .post-to-tuku {
        display: none;
        position: fixed;
        bottom: 48px;
        right: 0;
        width: 340px;
        height: 46px;
        background-color: #fff;
        -webkit-box-shadow: 0 -2px 8px 0 rgba(133, 136, 138, .1);
        -moz-box-shadow: 0 -2px 8px 0 rgba(133, 136, 138, .1);
        box-shadow: 0 -2px 8px 0 rgba(133, 136, 138, .1);
        font-size: 13px;
        font-weight: 500;
        color: #222;
        line-height: 46px;
        padding-left: 20px;
        .is-checkbox {
            position: absolute;
            right: 20px;
            bottom: 50%;
            &::before {
                width: 20px;
                height: 20px;
                border: 2px solid #e0e0e0;
            }
            &.is-checked {
                &::after {
                    left: 6px;
                    width: 12px;
                    height: 12px;
                    background-color: #222;
                }
            }
        }
    }
}

.main-zone {
    position: absolute;
    left: 0;
    top: 0;
    right: 340px;
    bottom: 0;
    height: 100%;
    padding: 22px 30px 80px;
    overflow-y: auto;
    .lable-add{
        font-size: 17px;
    }
    .import-from-album {
        color: #85888a;
        &:before {
            margin-right: 6px;
            font-size: 10px;
            color: #85888a;
            font-weight: 700;
        }
    }
    .photo-list {
        margin-left: -40px;
        font-size: 0;
        li {
            position: relative;
            display: inline-block;
            width: 250px;
            height: 250px;
            margin-left: 40px;
            margin-bottom: 40px;
            vertical-align: top;
            .photo-progress {
                height: 168px;
                padding: 60px 0;
                margin: 41px 0;
                background-color: #9fa099;
                text-align: center;
                color: #fff;
                font-size: 12px;
                .icon-loading--white {
                    margin: 0 auto;
                }
                p {
                    margin: 8px 0 0;
                }
            }
            img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                max-width: 250px;
                max-height: 250px;
                margin: auto;
            }
            .mask {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 270px;
                height: 188px;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                border: 3px solid transparent;
                cursor: move;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                .icon-close {
                    position: absolute;
                    right: 18px;
                    top: 18px;
                    display: none;
                    width: 19px;
                    height: 19px;
                    padding-top: 4px;
                    text-align: center;
                    background-color: rgba(0, 0, 0, .5);
                    &:before {
                        font-size: 11px;
                        color: #fff;
                    }
                }
            }
            &.choosed {
                .mask {
                    border-color: #02da7c;
                }
            }
            &:hover {
                .mask {
                    border-color: #02da7c;
                    .icon-close {
                        display: inherit;
                    }
                }
            }
            .file-input {
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                height: 168px;
                opacity: 0;
                cursor: pointer;
            }
            .upload-photo {
                height: 168px;
                padding: 47px 0;
                border: 2px solid #e0e0e0;
                margin: 41px 0;
                text-align: center;
                color: #85888a;
                font-size: 12px;
                .icon-add {
                    color: #e0e0e0;
                }
            }
        }
    }
    textarea {
        position: fixed;
        left: 0;
        bottom: 0;
        display: none;
        height: 80px;
        width: 100%;
        padding: 17px 366px 11px 26px;
        border: 0;
        outline: 0;
        font-size: 14px;
        color: #85888a;
        resize: vertical;
    }
}

.content {
    position: relative
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    background-color: #f9f9f9;
    min-width: 800px;
    font-family: -apple-system, BlinkMacSystemFont, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}